<template>
  <view class="classify">
    <!-- #ifdef H5 -->
    <wd-sticky :offset-top="-44">
      <view  style="">
        <wd-search v-model="value" :maxlength="10" />
      </view>
      <view style="width: calc(100vw - 30px); padding: 15px;" class="d-flex gm-tab">
        <view @click="setLabel(item)" :class="{'active': item.value == itemIndex}" class="gm-tab_li" v-for="(item,index) in items" :key="index">
          {{ item.name }}
        </view>
      </view>
    </wd-sticky>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <wd-sticky :offset-top="44">
      <view style="width: 100vw; padding: 15px;box-sizing: border-box;" class="d-flex gm-tab">
        <view @click="setLabel(item)" :class="{'active': item.value == itemIndex}" class="gm-tab_li" v-for="(item,index) in items" :key="index">
          {{ item.name }}
        </view>
      </view> 
    </wd-sticky>
    <view style="height: 44px;"></view>
    <!-- #endif -->
    <view style="margin: 0 15px;">
      <scroll-view class="scroll-view" scroll-y>
        <Waterfalls ref="fallsRef" @imageClick="wapperClick" :column="2" :value="falls">
          <!-- #ifdef MP-WEIXIN -->
          <view class="item" v-for="(item,index) in falls" :key="index" slot="slot{{index}}">
            <view style="padding: 6px 10px; text-align: center;" class="title">{{item.name}}</view>
          </view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <template v-slot:default="item">
            <view class="item">
              <view style="padding: 6px 10px; text-align: center;" class="title">{{item.name}}</view>
            </view>
          </template>
          <!-- #endif -->
        </Waterfalls>
      </scroll-view>
    </view>
  </view>
  <NavBar :index="3"></NavBar>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Waterfalls from "@/components/custom-waterfalls-flow.vue";
import NavBar from '@/section/a-navbar.vue'
import { toRouter } from '@/hooks/utils'
import { onLoad, onPullDownRefresh, onShow, onReachBottom } from "@dcloudio/uni-app";
const page = ref(1), isPullDownRefresh = ref(false);
const falls = ref([]), fallsRef = ref(null)
const itemIndex = ref('suggest'), value = ref('')
const items = ref([
  {
    name: '推荐',
    value: 'suggest',
  },
  {
    name: '游戏',
    value: 'game',
  },
  {
    name: '可爱',
    value: 'kawaii',
  },
  {
    name: '动漫',
    value: 'cartoon',
  },
  {
    name: '简约',
    value: 'simple'
  }
])
onMounted(() => {
  getWallpaper()
})
const getWallpaper = (type) => {
  uni.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 1500
  })
  if(type=='tab'){
    page.value = 1
  }
  uni.request({
    url: `/api/wallpaper/oss/page?page=${page.value}&size=20&type=` + itemIndex.value,
    method: 'GET',
    success: (res) => {
      res.data.data.forEach((item) => {
        item.image = item.url;
        item.name = decodeURIComponent(item.name);
      });
      if( type == 'tab' ){
        falls.value = res.data.data
        fallsRef.value.refresh()
      }else{
        falls.value = falls.value.concat(res.data.data)
      }
      uni.hideToast()
    }
  })
}
const setLabel = (item) => {
  itemIndex.value = item.value
  getWallpaper('tab')
}
const wapperClick = (item) => {
  toRouter("/pages/preview/index", `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}`);
}
const getThemes = () => {}
onPullDownRefresh(() => {
  page.value = 1;
  uni.showToast({
    title: '刷新中',
    icon: 'none',
    duration: 1500,
    position: 'top'
  });
  isPullDownRefresh.value = true;
  uni.request({
    url: `/api/wallpaper/oss/page?page=${page.value}&size=20&type=` + itemIndex.value,
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });

    falls.value = res.data.data;
    fallsRef.value.refresh()
  });
})
onReachBottom(() => {
  console.log("onReachBottom");
  page.value++;
  isPullDownRefresh.value = false;
  getWallpaper();
})
</script>

<style scoped lang="scss">
page{
  background: #f5f5f5;
}
.classify{
  background: rgb(245, 245, 245) url('http://124.223.41.167:8080/mobile/static/images/bg.png') no-repeat;
  background-size: 100% 500px;
}
.index-top{
  width: 100vw;
}
.index-tab{
  display: flex;
  height: 3rem;
  padding: 0 1rem;
  align-items: center;
  .tab-li{
    padding: 0 0.8rem;
    position: relative;
  }
  .active{
    font-size: 1.2rem;
  }
  .active::after{
    content: "";
    width: 20px;
    height: 3px;
    background: rgb(220, 64, 100);
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -10px;
    border-radius: 10px;
  }
}
.gm-tab_li{
  color: rgba(144, 144, 144, 1);
  font-size: 0.9rem;
}
.gm-tab{
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-gap: 10px;
  .active{
    color: rgba(220, 70, 129, 1);
  }
}
</style>